<script setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";

let chart = ref();

function chartInit() {
  let myChart = echarts.init(chart.value);

  let option = {
    tooltip: {},
    legend: {
      orient: "vertical",
      textStyle: {
        color: "#fff",
      },
      right: "30",
      top: "1",
    },
    series: [
      {
        type: "pie",
        radius: ["40%", "65%"],
        data: [
          { name: "行业一", value: 1000 },
          { name: "行业二", value: 734 },
          { name: "行业三", value: 589 },
        ],
        label: {
          show: true,
          position: "inside",
          color: "#fff",
          formatter: "{d}%", //{d}百分比 {c} 数据值 {b}名称
        },
        labelLine: {
          //标签的引导线
          show: false,
        },
      },
    ],
  };
  myChart.setOption(option);
  window.addEventListener("resize", () => {
    myChart.resize();
  });
}
onMounted(() => {
  chartInit();
});
</script>

<template>
  <!-- 饼图  -->
  <div class="boxstyle" style="height: 230px">
    <div class="title">行业分类</div>
    <div ref="chart" style="width: 100%; height: 220px"></div>
  </div>
</template>

<style scoped></style>
